<template>
  <a-layout class="allLayout">
  <a-layout-content>
      <a-button class="menubtn" type="primary" @click="addParentMenu()">新增一级组织机构</a-button>
      <a-table
        :columns="this.$staticMenu.organizeListColumns"
        :data-source="tableData"
      >
        <span slot="action" slot-scope="text, record, index">
          <a @click="handleAdd(record)">
            <span class="ant-tag ant-tag-blue">
              <a-icon type="form"/> 新增下级组织机构
            </span>
          </a>
          <a-divider type="vertical"/>
          <a  @click="editMenu(record)">
            <span class="ant-tag ant-tag-green">
              <a-icon type="eye"/>  编辑组织机构
            </span>
          </a>
          <a-divider type="vertical"/>
          <a @click="deleteMenu(record)">
            <span class="ant-tag ant-tag-volcano">
              <a-icon type="delete"/> 删除组织机构
            </span>
          </a>

        </span>
      </a-table>
    </a-layout-content>
    <modal
      ref="organizationModalForm"
      :title="modalTitle"
      :visible="modalVisible"
      :value="curVal"
      :type="addType"
      :ogName="name"
      @ok="handleOk"
      @cancel="handleCancel"
    ></modal>
  </a-layout>
</template>

<script>
  import {GETALLDEPARTMENTLIST,DELETEDEPARTMENT,UPDATEDEPARTMENT} from '@/../static/js/apis.js'
  import modal from "./components/organizeModal"
  import _ from "lodash" //引入lodash：封装了诸多对字符串，数组，对象等常见数据类型的处理函数
  export default {
    inject:['reload'],                                 //注入App里的reload方法
    name: 'approval',
    components: {
      modal
    },
    data() {
      return {
        tableData: [],
        rowSelection:{
          onChange: (selectedRowKeys, selectedRows) => {
            this.tableSelectedKeys=selectedRowKeys
          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows)
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows)
          }
      },
        /*modal参数*/
        modalTitle: '新增组织机构',     //modal标题
        modalVisible: false,    //modal关闭打开控制器
        curVal:'',
        addType:'',
        name:''
      }
    },
    methods: {
       /* modal确定事件 */
        handleOk (e) {
          this.modalVisible = false
        },
        /* modal取消事件 */
        handleCancel (e) {
          this.modalVisible = false
        },
     // 新增一级菜单
        addParentMenu () {
          this.modalTitle='新增组织机构'
          this.addType='一级菜单'
          this.name=''
          this.modalVisible = true
        },
        handleAdd (record) {
          this.modalTitle='新增组织机构'
          this.addType='下级菜单'
          this.curVal = record.key
          this.name=''
          this.modalVisible = true
        },
        editMenu(record){
            let self = this
            self.modalTitle='编辑组织机构'
            self.addType='编辑菜单'
            this.curVal = record.key
            self.modalVisible = true
            self.name=record.title
        },
        deleteMenu(record){
            let self = this
            var params = {
              id: record.key
            }
              DELETEDEPARTMENT(params, function (res) {
                self.$message.success(res.message)
                self.reload()
              })
        }
    },
   mounted () {
      let self = this
      GETALLDEPARTMENTLIST({ id: 0 }, function (res) {
        self.tableData = res.obj
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allLayout {
    margin: 30px;
  }

  .ant-layout-content {
    background-color: white;
      padding:20px;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }

  .action {
    color: #1890ff
  }
  .menubtn{
  margin-bottom: 20px
}
</style>
